
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #container{
        width: 400px;
        min-height: 300px;
        background-color: lightgreen;
        margin: auto;
        padding: 10px;
        text-align: center;
    }
    li{
        list-style: none;
        text-align: left;
    }

    </style>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src='template.js'></script>
    <script type='text/html' id='weather'>
    {{each weather as value}}
        <ul>
            <li>时间: {{value.date}}</li>
            <li>白天天气: {{value.info.day[1]}}</li>
            <li>气温: {{value.info.day[2]}} </li>
            <li>风向: {{value.info.day[3]}} </li>
            <li>风速: {{value.info.day[4]}} </li>
        </ul>
        <ul>
            <li>夜间天气: {{value.info.night[1]}}</li>
            <li>气温: {{value.info.night[2]}} </li>
            <li>风向: {{value.info.night[3]}} </li>
            <li>风速: {{value.info.night[4]}} </li>
        </ul>
    {{/each}}
    </script>
    <script>
        $(function(){
            $("#query").click(function(){
                var code = $("#city").val();
                $.ajax({
                    data:{app:'hao360',code:code},
                    dataType:'jsonp',
                    url:'http://cdn.weather.hao.360.cn/api_weather_info.php',
                    jsonp:'_jsonp',
                    jsonpCallback:'abc',
                    success:function(data){
                        console.log(data);
                        var html = template('weather',data);
                        $("#info").html(html);
                    }
                });
            });
        });
    </script>
    
</head>
<body>
    <div id="container">
        <select id="city">
            <option value="101010100">北京</option>
            <option value="101020100">上海</option>
            <option value="101280101">广州</option>
            <option value="101280601">深圳</option>
        </select>
        <input type="button" value="查询" id="query">
        <div id="info"></div>

        
    </div>
   
</body>
</html>
<!-- http://cdn.weather.hao.360.cn/api_weather_info.php?_jsonp=abc&app=hao360&code=101020100&_=1508897334858 -->